<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=320; user-scalable=0;"/>
  <script src="icanvas012.js"></script>
  <script type="text/javascript">
var canvas;

function init()
{
  canvas = new iCanvas(document.getElementById("canvas1"));
  var item;
  item = new iCanvas.Item('id1', 10, 10, 50, 40, 'rgba(255,0,0,0.5)');
  canvas.add(item);

  item = new iCanvas.Item('id2', 50, 20, 40, 30, 'rgba(0,0,255,0.5)');
  item.draw = iCanvas.Item.drawOval;
  canvas.add(item);

  item = new iCanvas.Item('id3', 70, 40, 40, 30, 'rgba(0,255,0,0.5)');
  canvas.add(item);

  item = new iCanvas.Item('id4', 90, 60, 40, 30, 'rgba(0,255,255,0.5)');
  canvas.add(item);
}

function click()
{
  item = canvas.getElementById('id2');
  item.style.left += 10;
  canvas.update();
}

  </script>
</head>
<body onload="init()" style="margin:0">
  <canvas id="canvas1" 
    style="position:absolute; width:100%; height:100%; left:0px; top:0px; background:#ffff80">
  </canvas>
  <img src="images/feed-icon-28x28.png" onclick="click(this)" 
       style="position:absolute; left:20px; top:120px" />
</body>
</html>
